<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜品管理 - 外卖平台</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="dish-upload.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="dish-upload-container">
        <!-- 顶部导航 -->
        <nav class="top-nav">
            <div class="nav-content">
                <div class="nav-left">
                    <button class="back-btn" onclick="goBack()">
                        <i class="fas fa-arrow-left"></i>
                        返回
                    </button>
                    <h1>菜品管理</h1>
                </div>
                <div class="nav-right">
                    <button class="btn btn-primary" onclick="showAddDishModal()">
                        <i class="fas fa-plus"></i>
                        添加菜品
                    </button>
                </div>
            </div>
        </nav>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 筛选和搜索 -->
            <div class="filter-section">
                <div class="search-bar">
                    <input type="text" id="searchInput" placeholder="搜索菜品名称...">
                    <button class="search-btn" onclick="searchDishes()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <div class="filter-options">
                    <select id="categoryFilter" onchange="filterDishes()">
                        <option value="">全部分类</option>
                        <option value="1">中餐</option>
                        <option value="2">西餐</option>
                        <option value="3">日料</option>
                        <option value="4">韩料</option>
                        <option value="5">甜品</option>
                        <option value="6">快餐</option>
                        <option value="7">饮品</option>
                        <option value="8">火锅</option>
                    </select>
                    <select id="statusFilter" onchange="filterDishes()">
                        <option value="">全部状态</option>
                        <option value="available">上架</option>
                        <option value="unavailable">下架</option>
                    </select>
                </div>
            </div>

            <!-- 菜品列表 -->
            <div class="dishes-grid" id="dishesGrid">
                <!-- 菜品卡片将通过JavaScript动态生成 -->
            </div>

            <!-- 空状态 -->
            <div class="empty-state" id="emptyState" style="display: none;">
                <i class="fas fa-utensils"></i>
                <h3>暂无菜品</h3>
                <p>点击"添加菜品"开始添加您的第一个菜品</p>
                <button class="btn btn-primary" onclick="showAddDishModal()">
                    <i class="fas fa-plus"></i>
                    添加菜品
                </button>
            </div>
        </div>

        <!-- 添加/编辑菜品模态框 -->
        <div class="modal" id="dishModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="modalTitle">添加菜品</h3>
                    <button class="close-modal" onclick="closeDishModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="dishForm" onsubmit="saveDish(event)">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="dishName">菜品名称 *</label>
                                <input type="text" id="dishName" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="dishPrice">价格 (元) *</label>
                                <input type="number" id="dishPrice" name="price" step="0.01" min="0" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="dishOriginalPrice">原价 (元)</label>
                                <input type="number" id="dishOriginalPrice" name="originalPrice" step="0.01" min="0">
                            </div>
                            <div class="form-group">
                                <label for="dishCategory">分类 *</label>
                                <select id="dishCategory" name="categoryId" required>
                                    <option value="">请选择分类</option>
                                    <option value="1">中餐</option>
                                    <option value="2">西餐</option>
                                    <option value="3">日料</option>
                                    <option value="4">韩料</option>
                                    <option value="5">甜品</option>
                                    <option value="6">快餐</option>
                                    <option value="7">饮品</option>
                                    <option value="8">火锅</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="dishDescription">菜品描述 *</label>
                            <textarea id="dishDescription" name="description" rows="3" required></textarea>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="dishStock">库存数量</label>
                                <input type="number" id="dishStock" name="stock" min="0" value="0">
                            </div>
                            <div class="form-group">
                                <label for="dishCookingTime">制作时间 (分钟)</label>
                                <input type="number" id="dishCookingTime" name="cookingTime" min="1" value="15">
                            </div>
                        </div>

                        <div class="form-group">
                            <label>菜品图片 *</label>
                            <div class="image-upload">
                                <input type="file" id="dishImage" name="image" accept="image/*" onchange="handleImageUpload(event)">
                                <div class="upload-area" onclick="document.getElementById('dishImage').click()">
                                    <div class="upload-content" id="uploadContent">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <p>点击上传图片</p>
                                        <span>支持 JPG、PNG 格式，建议尺寸 300x200</span>
                                    </div>
                                    <div class="image-preview" id="imagePreview" style="display: none;">
                                        <img id="previewImg" src="" alt="预览图片">
                                        <button type="button" class="remove-image" onclick="removeImage()">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>图片相册（可选，最多5张）</label>
                            <div class="image-gallery-upload">
                                <input type="file" id="dishGallery" accept="image/*" multiple onchange="handleGalleryUpload(event)">
                                <div class="upload-area small" onclick="document.getElementById('dishGallery').click()">
                                    <div class="upload-content">
                                        <i class="fas fa-images"></i>
                                        <p>点击或拖拽上传多张图片</p>
                                        <span>将用于菜品详情页展示</span>
                                    </div>
                                </div>
                                <div class="gallery-preview" id="galleryPreview"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>菜品标签</label>
                            <div class="tag-input">
                                <input type="text" id="tagInput" placeholder="输入标签后按回车添加">
                                <div class="tags-container" id="tagsContainer">
                                    <!-- 标签将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>菜品属性</label>
                            <div class="checkbox-group">
                                <label class="checkbox-label">
                                    <input type="checkbox" name="isSpicy" id="isSpicy">
                                    <span class="checkmark"></span>
                                    辣味
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="isVegetarian" id="isVegetarian">
                                    <span class="checkmark"></span>
                                    素食
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="isRecommended" id="isRecommended">
                                    <span class="checkmark"></span>
                                    推荐菜品
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="dishIngredients">主要食材</label>
                            <input type="text" id="dishIngredients" name="ingredients" placeholder="用逗号分隔，如：鸡肉,花生,辣椒">
                        </div>

                        <div class="form-group">
                            <label for="dishAllergens">过敏原</label>
                            <input type="text" id="dishAllergens" name="allergens" placeholder="用逗号分隔，如：花生,海鲜">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeDishModal()">取消</button>
                    <button type="submit" form="dishForm" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>

        <!-- 删除确认模态框 -->
        <div class="modal" id="deleteModal">
            <div class="modal-content small">
                <div class="modal-header">
                    <h3>确认删除</h3>
                    <button class="close-modal" onclick="closeDeleteModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <p>确定要删除这个菜品吗？删除后无法恢复。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">取消</button>
                    <button type="button" class="btn btn-danger" onclick="confirmDelete()">删除</button>
                </div>
            </div>
        </div>
    </div>

    <script src="database.js"></script>
    <script src="dish-upload.js"></script>
</body>
</html>

